<!--
 * @Description: 
 * @Autor: starzhou
 * @Date: 2020-08-31 20:34:35
 * @LastEditTime: 2020-09-10 21:29:11
-->
<template>
  <div id="pageHome">
    <div class="home-content">
      <div class="home-comtent-top">
        <span class="home-comtent-top-title">方案选择：</span>
        <el-select v-model="paramData.id" placeholder="请选择" class="schemeName">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.schemeName"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="home-content-box">
        <el-tabs v-model="activeName">
          <el-tab-pane label="当天" name="5" />
          <el-tab-pane label="近7天" name="4" />
        </el-tabs>
        <div id="chartToday">
          <el-card shadow="never" v-loading="!lineData">
            <div class="chart-boxs">
              <span class="chart-box-title">舆情走势</span>
              <div id="line-chart" class="chart-box"></div>
            </div>
          </el-card>

          <el-card shadow="never" v-loading="!fillrectData">
            <div class="chart-boxs">
              <span class="chart-box-title">整体舆情分布</span>
              <div id="bar-chart" class="chart-box"></div>
            </div>
          </el-card>

          <el-card shadow="never" v-loading="!cloudData">
            <div class="chart-boxs">
              <span class="chart-box-title">舆论热词</span>
              <div
                id="cloud-chart"
                style="height:calc(100% - 50px);margin-top:20px"
                class="chart-box"
              ></div>
            </div>
          </el-card>

          <el-card shadow="never" v-loading="!areaList">
            <div class="chart-boxs" style="height:600px;">
              <span class="chart-box-title">地域分布</span>
              <div id="map-chart" class="chart-box" style="height: 550px;"></div>
              <div class="visualMap">
                <span class="visualMap_top">高</span>
                <span class="visualMap_bottom">低</span>
              </div>
              <div id="area-chart" class="chart-box" style="height: 500px;">
                <ul class="area-ul">
                  <li class="area-li" v-for="item in areaList" :key="item.areacode">
                    <span class="area-name">{{item.name}}</span>
                    <span class="area-progress">
                      <span class="area-rate" :style="{'width':item.rate}"></span>
                    </span>
                    <span class="area-data">{{item.value}}条</span>
                  </li>
                </ul>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
import "../../../node_modules/echarts/map/js/china.js";
import "../../assets/css/home.css";
import $Api from "../../utils/api";
import { lineChart } from "./mixin/lineChart";
import { cloudChart } from "./mixin/cloudChart";
import { barChart } from "./mixin/barChart";
import { mapChart } from "./mixin/mapChart";
export default {
  mixins: [lineChart, cloudChart, barChart, mapChart],
  name: "HelloWorld",
  data() {
    return {
      options: [],
      activeName: "5",
      paramData: {
        id: "",
        filterTimeType: 5,
        filterStartTime: "2020-08-14 00:00:00",
        filterEndTime: "2020-08-17 00:00:00",
        filterSortType: 1,
        filterEmotionType: 1,
        filterRegionType: 1,
        filterFromType: [0],
      },
      lineData: null, //折线图
      fillrectData: null, //柱状图
      cloudData: null, //词图云数据
      areaList: null, //地图数据
    };
  },
  created() {
    this.fetchSchemeList();
  },
  watch: {
    activeName() {
      this.$set(this.paramData, "filterTimeType", parseInt(this.activeName));
      this.initData();
    },
    "paramData.id"() {
      this.initData();
    },
  },
  mounted() {},
  methods: {
    // 获取方案列表
    fetchSchemeList() {
      let self = this;
      (async () => {
        let data = await $Api.fetchSchemeList();
        if (data.code == 200) {
          self.$set(self, "options", data.data);
          self.$set(self.paramData, "id", data.data[0].id);
        }
      })();
    },
    //获取图表(异步获取)
    initData() {
      let self = this;
      $Api.fetchLineData(self.paramData, 1).then((data) => {
        if (data.code == 200) {
          self.$set(self, "lineData", data.data);
          self.drawLine();
        }
      });
      $Api.fetchLineData(self.paramData, 2).then((data) => {
        if (data.code == 200) {
          self.$set(self, "fillrectData", data.data);
          self.drawBar();
        }
      });
      $Api.fetchLineData(self.paramData, 3).then((data) => {
        if (data.code == 200) {
          let data1 = data.data.slice(0, 10);
          self.$set(self, "cloudData", data1);
          self.drawCloud();
          setTimeout(() => {
            self.$set(self, "cloudData", data.data);
            self.drawCloud();
          }, 500);
        }
      });
      $Api.fetchLineData(self.paramData, 4).then((data) => {
        if (data.code == 200) {
          self.$set(self, "areaList", data.data);
          self.drawMap();
          self.drawArea();
        }
      });
    },
  },
};
</script>
<style>
</style>
